<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>
排版示例
</title>
<style>
  /* 排版演示 */
  div {border: dotted 1px purple;
    weight: 50px;
    text-align: center;}
  #left, #middle, #right {
        float: left;
        width: 33%
    }
  #header, #footer {background-color: goldenrod;}
  /* 清楚浮动演示 */
  #left {height: 100px;
    background-color: cyan;}
  #footer {clear: left;}
</style>
</head>
<body>
<h1>浮动显示测试</h1>
这是一段文本
<div id='header'>大头大头下雨不愁人家有伞我有大头</div>
这又是一段文本
<div id='left'>左青龙</div>
<div id='middle'>老牛在当中</div>
<div id='right'>右白虎</div>
<div id='footer'>神龙摆尾</div>
</body>
</html>
